<template>
  <div class="head">
      <ul>
          <li v-for="(item , index) in list" v-bind:key="index">
              {{item}}
          </li>
      </ul>
      <div class="log">
          <input type="text">
          <button>创作中心</button>
          <a href="">登录</a>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:['发现音乐' , '我的音乐' , '朋友' , '商城' , '音乐人' , '下载客户端']
        }
    }
}
</script>

<style>

    .head{
        background:#242424;
        display:flex;
        justify-content: space-between;
        height:80px;
        width:1000px;
        margin:0 auto;
    }
    .head ul{
        display:flex;
        width:800px;
        justify-content:space-around;
    }
    .head ul li{
        color:#fff;
        font-size:18px;
        list-style:none;
        line-height:80px;
        flex:1;
        text-align:center;
    }
    .head ul li:hover{
        background:#000;
    }
    .log{
        display:flex;
        align-items:center;
        height:80px;
        width:400px;
    }
    .log input{
        border-radius:15px;
        height:30px;
        border:none;
        margin-right:10px;
    }
    .log button{
        height:30px;
        border-radius: 15px;
        background:#000;
        border:1px #fff solid;
        color:#fff;
        margin-right:10px;
        width:90px;
    }
    .log a{
        text-decoration: none;
        color:#666;
    }
</style>